<template>
<uni-shadow-root class="partials-jifen_list-index"><block>
  
  <view class="right_box">
      <block v-if="someData.relateBean.length!=0">
        <view class="detail_list_mode1" style="background:  #eeeeee;">
          <view v-for="(jiFenGoods,index) in (someData.relateBean)" :key="jiFenGoods.index" class="mode1_items" :data-info="publicFun.toStringFun(jiFenGoods)" @click="tolinkUrl" style="border-right: 10px solid #eeeeee;"> 
            <image mode="aspectFill" :src="jiFenGoods.icon"></image>
            <view class="center" :style="'width:'+((1/jsonData.column)*sysWidth-40)+'px;'">{{jiFenGoods.name}}</view>
          <view class="NewBox">
            <text class="ml20">{{jiFenGoods.needJifen}}积分</text>
            <text class="mr20">库存:{{jiFenGoods.count}}</text>
          </view>
        <view class="exchange" :style="'background-color: '+(setting.platformSetting.defaultColor)+';'" @click.stop.prevent="buyGoods" :data-id="index"><text style="color:#fff;">兑换</text></view>
          </view>
        </view>
      </block>
      <block v-if="jiFenGoods.length==0">
        <view class="noproduct">
          <image mode="widthFix" src="https://image1.sansancloud.com/xianhua/2019_12/16/15/54/55_950.jpg?x-oss-process=style/preview_120"></image>
          <text>没有相关商品</text>
        </view>
      </block>
    </view>
</block></uni-shadow-root>
</template>
<wxs src="../../public/publicFun.wxs" module="publicFun"></wxs>
<script>

global['__wxRoute'] = 'partials/jifen_list/index'
const app = getApp();
Component({
  properties: {
    data: {
      type: JSON,
      value: 'default value',
    }
  },
  data: {
    someData: {},
    sysWidth:"",
  },
  ready:function(){
    let that=this;
    console.log("====jifen======", that.data.data,app.globalData.setting)
    that.setData({
      sysWidth: app.globalData.sysWidth,
      setting:app.globalData.setting,
      someData: that.data.data
    });
  },
  methods: {
    buttom: function () {
      app.globalData.wxLogin(1011)
    },
    // 兑换商品
    buyGoods: function (e) {
      var that = this;
      console.log(e.currentTarget.dataset.id)
      wx.showModal({
        title: '提示',
        content: '确定兑换商品',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定')
            that.exchange(e.currentTarget.dataset.id)
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },
    //兑换
    exchange: function (index) {
      console.log("======a=======", index)
      var that = this;
      console.log("======a=======", that.data.someData.relateBean[index])
      // 判断是否已经兑换过
      if (that.data.someData.relateBean[index].count <= 0) {
        wx.showToast({
          title: "超出兑换上限",
          image: '/wxcomponents/images/icons/tip.png',
          duration: 2000
        })
      }
      else {
        var id = that.data.someData.relateBean[index].id;
        let exchange = {
          jifenItemId: id,
          fromSource: "wx"
        }
        let menDianYangShi = app.globalData.AddClientUrl("/jifen_exchange_phone_json.html", exchange, 'get')
        wx.request({
          url: menDianYangShi.url,
          data: menDianYangShi.params,
          header: app.globalData.headerPost,
          method: 'get',
          success: function (res) {
            console.log("======a=======", res)
            if (res.data.errcode == "-1") {
              wx.showToast({
                title: res.data.errMsg,
                image: '/wxcomponents/images/icons/tip.png',
                duration: 2000
              })
              console.log(res.data.errMsg)
            }
            else {
              wx.showToast({
                title: "兑换成功",
                image: '/images/icons/targ.png',
                duration: 2000
              })
              // 兑换成功后次数减少
              var time = that.data.someData;
              console.log("time", time.relateBean[index].count--)
              time.relateBean[index].count = time.relateBean[index].count--;
              that.setData({
                someData: time
              })
            }
          }
        })
      }
    },
    tolinkUrl: function (e) {
      console.log(e.currentTarget.dataset.info)
      let info = e.currentTarget.dataset.info;
      if(info&&info!=""){
          info=JSON.parse(info)
      }
      let jifenId = info.id
      let productId = info.productId
      let couponId = info.couponId
      let jifenNum = info.needJifen
      let jifenCount = info.count
      if (productId) {
        var a = "jifen_product_detail.html?type=jifen&productId=" + productId + '&jifenNum=' + jifenNum + '&jifenId=' + jifenId + '&jifenCount=' + jifenCount;
      }
      if (couponId) {
        var a = "coupon_detail.html?type=jifen&couponId=" + couponId;
      }
      app.globalData.linkEvent(a);
    },
  },
})
export default global['__wxComponents']['partials/jifen_list/index']
</script>
<style platform="mp-weixin">
.right_box{
  background: #fff;
  display: flex;
  flex-direction: column;
}
.productItem{
  padding: 10px 6rpx;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items:center;
  border-bottom: 1rpx solid #ddd;
}
.productItem > .productItemImage{
  width: 140rpx;
  height: 140rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx;
  position: relative;
}
.productImg{
  width: 140rpx;
  height: 140rpx;
}
.productItem >.productInfo{
  width: 75%;
}
.productInfo{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 20rpx;
}
.productInfo_name{
  font-size: 24rpx;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.productInfo_decribe{
  margin-top: 10rpx;
  display: flex;
  flex-direction: column;
}
.small_decribe{
  font-size: 20rpx;
  color: #989898;
  margin-bottom: 5rpx;
}
.productInfo_promotionName{
  background: #f7515f;
  border-radius: 5rpx;
  color: #fff;
  font-size: 20rpx;
  padding: 5rpx 10rpx 5rpx 10rpx;
}
.productInfo_Price{
  color: red;
  font-size: 24rpx;
  width: 100%;
  margin-top: 15rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content:space-between;
}
.price{
  font-size: 26rpx !important;
}
.tag_price{
  text-decoration:line-through;
  color: #999;
  font-size: 22rpx
}
.price_group{
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
.productInfo_Nums{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.productInfo_Nums > image{
  width:16rpx;
  height: 16rpx;
  border: 1rpx solid #ddd;
  border-radius: 50%;
  padding: 12rpx;
}
.bottomHeight{
  height: 10em;
}
.detail_list_mode1{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center; 
  flex-wrap: wrap;
  padding: 10px 0px 10px 10px;
  background: #f9f9f9; 
} 
.detail_list_mode1 .mode1_items:last-child, 
.detail_list_mode1 .mode1_items:nth-last-child(2){
  margin-bottom: 0;
}
.mode1_items{
  margin-bottom: 10px;
  width: 50%;
  box-sizing: border-box;
  border-right: 10px solid #f9f9f9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  padding-bottom: 10px;
}
.mode1_items image{
  margin: 0 auto;
  padding-top: 10px;
  width: 300rpx;
  height: 300rpx;
}
.mode1_items .center{
  margin: 0 auto;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding: 5px 10px 8px 10px;
  font-size: 13px;
  color: #333;
  line-height: 21px;
  height:15px;
}
 .mode1_items text{
  text-align: left;
  overflow: hidden;
  font-size: 20px;
  color: #FF3D3D;
  line-height: 28px;
}
.exchange{
  width: 150rpx;
  height: 60rpx;
  border-radius: 30rpx;
  margin: 0 auto;
  margin-top: 2px;
  display: flex;
  justify-content: center;
}
.exchange text{
  font-size: 30rpx;
  display: block;
  line-height: 60rpx;
}
/*新样式  */
.NewBox{
  width: 350rpx;
  display: flex;
  justify-content: space-between;
}
.NewBox text{
  font-size: 30rpx;
}
.ml20{
  margin-left: 20rpx;
}
.mr20{
  margin-right: 25rpx;
}
.NewBox image{
  width: 50rpx;
  height: 50rpx;
  margin-top: -18rpx;
  margin-right: 25rpx;
}
</style>